<template>
  <div class="probe">
    <div class="probe-list">
      <div v-for="(item, index) in list" :key="index" class="probe-item">
        <div class="probe-item-label">{{ item.label }}</div>
        <el-icon><Right /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const list = ref([
  { label: '查套餐。', value: '222' },
  { label: '查流量。', value: '222' },
  { label: '查话费余额。', value: '222' }
])
</script>
<style scoped lang="less">
.probe {
  display: flex;
  flex-direction: column;

  .probe-item {
    display: flex;
    align-items: center;
    width: fit-content;
    background-color: #ffffff;
    margin-top: 8px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f0f2f5;
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      'SF Pro SC',
      'SF Pro Display',
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    transition: all 0.3s ease; /* 添加过渡效果 */

    .probe-item-label {
      margin-right: 10px;
      font-size: 14px;
    }
  }

  .probe-item:hover {
    background-color: #6baeff;
    color: #ffffff;
  }
}
</style>
